<template>
	<view class="page">
		<view class="house u-radius-5 u-font-28 u-p-12">
			<view class="flex-between" @click="dyshow = true">
				<view class="flex-center">
					<image src="../../static/zxcimg/dy.png" class="w36 h36 u-m-r-16" mode=""></image>
					<text>{{address}}</text>
				</view>
				<view class="role u-radius-5">
					<u-icon name='arrow-down'></u-icon>
				</view>
			</view>
			<!-- <view class="u-m-t-16 flex" style="align-items: center;">
				<image src="../../static/zxcimg/mph.png" class="w32 h32 u-m-r-16" mode=""></image>
				<text>341</text>
			</view> -->
		</view>
		<!-- 开门 -->
		<view class="opendoor u-radius-5 u-p-16 u-font-28">
			<view class="u-p-tb-40 flex-center" @click="opendoorclick">
				<image src="../../static/zxcimg/open.png" class="w340 u-m-t-200 h340" mode=""></image>
			</view>
			<!-- <view class="u-m-t-28">
				视频记录
			</view>
			<view v-for="i in 4">
				<view class="flex-between u-m-t-18" style="color: #8A8A8A;">
					<view class="flex-center">
						<image src="../../static/zxcimg/time.png" class="w24 h24" mode=""></image>
						<text class="u-m-l-10">2075 - 10 - 09 02:21:29</text>
					</view>
					<view class="flex-center">
						<image src="../../static/zxcimg/time1.png" class="w28 h24" mode=""></image>
						<text class="u-m-l-10">1分20秒</text>
					</view>
				</view>
				<u-line margin='30rpx 0'></u-line>
			</view> -->
		</view>
		<getavatar :show='show' @close='finish'></getavatar>
		<u-picker @confirm="confirm4" @close='dyshow=false' @cancel='dyshow=false' keyName='addr'
			:closeOnClickOverlay='true' :show="dyshow" :columns="userlist"></u-picker>
	</view>
</template>

<script>
	// #ifdef MP
	const wmpfVoip = requirePlugin('wmpf-voip').default
	console.log(wmpfVoip, '自知则知之自知则知之这咋') // 有结果即表示引入插件成功
	wmpfVoip.setUIConfig({
		btnText: '去开门',
		callerUI: {
			cameraRotation: 270,
			aspectRatio: 16 / 9,
			objectFit: 'contain',
			enableToggleCamera: false // 禁用摄像头切换
		},
		// listenerUI: {
		// 	cameraRotation: 270,
		// 	aspectRatio: 16 / 9,
		// 	objectFit: 'contain',
		// 	enableToggleCamera: false // 禁用摄像头切换
		// }
	})

	wmpfVoip.onVoipEvent((event) => {
		var that = this
		if (event.eventName === 'showCustomBox') {
			console.log(event.data.callerId, '自定义按钮被点击');
			that.$api.post('/door_pass/open_door', {
				sn: event.data.callerId
			}).then(res => {
				uni.showToast({
					title: '开门成功~',
					icon: 'none'
				})
			})
			return
			// 在这里处理按钮点击逻辑
		}
	});
	// #endif

	export default {
		data() {
			return {
				dyshow: false,
				show: false,
				userlist: [],
				address: '',
				role: '',
				sn: ''
			}
		},
		onLoad(opt) {
			if (opt.scene) {
				uni.setStorageSync('qrcode', opt.scene)
				console.log(opt,'opt.scene');
			}
			this.getcode()
		},
		onShow() {
			

		},
		methods: {
			finish() {
				this.show = false
				setTimeout(()=>{
					this.init()
				},1000)
			},
			getcode() {
				var that = this
				uni.login({
					provider: 'weixin',
					success({
						code
					}) {
						that.$api.post('/Passport/loginMpWx', {
							form: {
								code: code,
								qrcode: uni.getStorageSync('qrcode') || ''
							}
						}).then(res => {
							uni.setStorageSync('token', res.data.token)
							that.$toast(res.message)
							if (!res.data.mobile) {
								that.show = true
							} else {
								uni.removeStorageSync('qrcode')
								that.init()
							}
							
						}).catch(err=>{
							
							uni.removeStorageSync('qrcode')
							console.log(err);
						})
					},

				})
			},
			confirm4(e) {
				this.sn = e.value[0].sn
				this.address = e.value[0].addr
				this.dyshow = false
			},
			opendoorclick() {
				this.$api.post('/door_pass/open_door', {
					sn: this.sn
				}).then(res => {
					uni.showToast({
						title: '开门成功~',
						icon: 'none'
					})
				})

			},

			init() {
				//【首页】获取用户的单元数据
				this.$api.get('/user/door_list').then(res => {
					this.userlist = [res.data]
					this.address = res.data[0].addr
					this.role = res.data[0].role
					this.sn = res.data[0].sn
					console.log('走init了');
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background-color: #FAFAFA;

		.house {
			width: 710rpx;
			margin: 30rpx auto;
			background-color: #F0F3FE;
			box-sizing: border-box;

			.role {
				background-color: #E2F2FF;
				padding: 2px 4px;
				color: #409EFF;
			}
		}

		.opendoor {
			width: 710rpx;
			margin: 0 auto;
			height: 90vh;

			background: linear-gradient(180deg, #DFEFFF 0%, #FFFFFF 100%);
		}
	}
</style>